<template>
  <div class="tab">
    <!-- 标签项 -->
    <van-cell title="规格" is-link @click="open('spec')" />
    <van-cell title="属性" is-link @click="open('parts')" />
    <van-cell title="运费" />

    <!-- 通用弹出层 -->
    <van-popup
      v-model:show="isShow"
      :style="{ padding: '16px' }"
      position="bottom"
      @close="close"
    >
      <!-- 规格 -->
      <div v-if="current === 'spec'">
        <product-list-view :productList="productList" />
      </div>
 
      <!-- 属性 -->
      <div v-if="current === 'parts'">
        <attribute-view :attribute="attribute" />
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import productListView from './productList.vue'
import attributeView from './attribute.vue'

defineProps(['productList', 'attribute'])
const isShow = ref(false)

const current = ref('')

const open = (type) => {
  current.value = type
  isShow.value = true
}

const close = () => {
  isShow.value = false
  current.value = ''
}
</script>

<style scoped>
.tab {
  width: 100%;
}
</style>
